<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>态势感知</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">
        <!-- modal杭州市药品风险评估详细分析 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myModalLabel">杭州市药品风险评估详细分析</h4>
                    </div>
                    <div class="modal-body" style="position: relative;">
                        <div id="gauge" style="width: 100%;height:350px;"></div>
                        <div class="tsgz-modal-btn">
                            <a href="./fxxq.html">查看详细</a>
                            <a href="javascript:;">深入钻取</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./cyzl.html" class="cyzl">
                            <span class="badge">2</span>
                            产业总览
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="javascript:;" class="tsgz on">
                            <span class="badge">2</span>
                            态势感知
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./yjcz.html" class="yjcz">
                            <span class="badge">2</span>
                            预警处置
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <div class="content-flex tsgz-wrapper">
                        <div class="tsgz-left flex-align">
                            <div class="tsgz-left-item " style="display: flex;flex-flow: row">
                                <div id="liquidFill" style="width: 50%;height:80%"></div>
                                <div id="liquidFill2" style="width: 50%;height:80%"></div>

                            </div>
                            <div class="tsgz-left-item  ">
                                <div class="a-tit">研判维度</div>
                                <div class="chart-box">

                                    <main class=" mainclass">
                                        <div class="path">
                                            <img class="a-logo" src="../src/img/tsgz/mian-bg.png" />
                                            <div class="avatar">
                                                <span>
                                                    <a href="javascript:;">静态</a>
                                                    <span class="item-bage">(2)</span>
                                                </span> <img src="../src/img/tsgz/main1.png" />
                                            </div>
                                            <div class="avatar">
                                                <span>
                                                    <a href="./jdjc.html">监督检查</a>
                                                    <span class="item-bage">(2)</span>
                                                </span> <img src="../src/img/tsgz/main2.png" />
                                            </div>
                                            <div class="avatar">
                                                <span>
                                                    <a href="./cyjy.html">抽样检验</a>
                                                    <span class="item-bage">(2)</span>
                                                </span> <img src="../src/img/tsgz/main3.png" />
                                            </div>
                                            <div class="avatar">
                                                <span>
                                                    <a href="./blfy.html">不良反应</a>
                                                    <span class="item-bage">(2)</span>
                                                </span>
                                                <img src="../src/img/tsgz/mian4.png" />
                                            </div>
                                            <div class="avatar">
                                                <span>
                                                    <a href="./qyxy.html">企业信用</a>
                                                    <span class="item-bage">(2)</span>
                                                </span>
                                                <img src="../src/img/tsgz/mian5.png" />
                                            </div>
                                            <div class="avatar">
                                                <span>
                                                    <a href="./qt.html">其他</a>
                                                    <span class="item-bage">(2)</span>
                                                </span> <img src="../src/img/tsgz/main6.png" />
                                            </div>
                                        </div>
                                    </main>
                                </div>
                            </div>
                            <div class="tsgz-left-item  ">
                                <div class="a-tit">研判环节</div>
                                <div class="chart-box">
                                    <div class="yphj-item">生产环节</div>
                                    <div class="yphj-item on">流通环节</div>
                                </div>

                            </div>
                        </div>
                        <div class="tsgz-middle flex-align">
                            <div class="tsgz-middle-item">
                                <div class="a-tit">研判区域</div>
                                <div class="chart-box">
                                    <div id="map" style="width: 100%;height:100%;"></div>

                                </div>

                            </div>
                            <div class="tsgz-middle-item">
                                <div class="a-tit">一年内指数变化</div>
                                <div class="chart-box">
                                    <div id="main-bar" style="width: 100%;height:100%;"></div>
                                </div>

                            </div>
                        </div>
                        <div class="tsgz-right flex-align">
                            <div class="tsgz-right-item">
                                <div class="a-tit">区域指数排名</div>
                                <div class="chart-box" style="position: relative;">
                                    <div id="main-bar3" style="width: 100%;height:100%;"></div>
                                    <div class="table-bar3">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <th>
                                                        <span class="line"></span>
                                                        区域</th>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <span class="line"></span>
                                                        评分</th>
                                                    <td>11</td>
                                                    <td>11</td>
                                                    <td>11</td>
                                                    <td>11</td>
                                                    <td>11</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                    <td>杭州</td>
                                                </tr>
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tsgz-right-item">
                                <div class="a-tit">区域指数变化趋势</div>
                                <div class="chart-box">
                                    <div id="main-bar2" style="width: 100%;height:100%;"></div>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/echarts-liquidfill.min.js"></script>
    <script src="../src/js/loading.js"></script>
    <script>
        $(function () {
            // 加载显示测试  不需要可删除
            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()
            drawLiquidFill({
                id: 'liquidFill',
                value: 0.7,
                title: '本年度'
            });
            drawLiquidFill({
                id: 'liquidFill2',
                value: 0.2,
                title: '本月'
            });
            chartBar1({
                id: 'main-bar',
                color: ['#FA6400'],
                type: 'line',
                lableList: ['1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月'],
                // legendData: ['预警数量'],
                dataList: [
                    [1, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20]
                ]
            })
            chartBar2({
                id: 'main-bar3',
                color: ['#069869', '#517757', '#636F52', '#80624B', '#905B47', '#A95142',
                    '#CF5F4C',
                    '#C83B3A', '#FF2424'
                ],
                type: 'bar',
                lableList: ['杭州', '宁波', '嘉兴', '湖州', '金华', '温州', '丽水', '衢州', '绍兴'

                ],
                // legendData: ['预警数量'],
                dataList: [
                    [12, 10, 9, 8, 7, 6, 5, 4, 3],
                ]

            })
            showmap()
            chartBar1({
                id: 'main-bar2',
                color: ['#00C601', '#BD10E0', '#52FFFD', '#BCEB4D', '#F5A623', '#E75656',
                    '#5C13FE',
                    '#669F2B', '#AA671D', '#2289F2', '#E82177'
                ],
                type: 'line',
                lableList: ['1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月', '1月'],
                legendData: ['杭州', '宁波', '嘉兴', '湖州', '金华', '温州', '丽水', '衢州', '绍兴',
                    '台州', '舟山'
                ],
                dataList: [
                    [12, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [13, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [15, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [16, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [17, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [18, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [19, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [100, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [101, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [102, 20, 160, 1, 20, 160, 1, 20, 160, 1, 20],
                    [1, 230, 160, 1, 20, 160, 1, 20, 160, 1, 20]


                ]

            })
        })

        function drawGauge() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('gauge'));
            // 指定图表的配置项和数据 测试   随机放的数值
            let inputValue = ~~(Math.random() * 100)

            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },

                series: [{
                        startAngle: 200,
                        endAngle: -20,
                        type: 'gauge',
                        radius: '90%',

                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [1, '#3E789F']
                                ],
                                width: 2
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        name: '',
                        type: 'gauge',
                        startAngle: 200,
                        endAngle: -20,
                        detail: {
                            formatter: '{value}'
                        },
                        data: [{
                            value: inputValue,
                            name: ''
                        }],
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [0.25, '#439B26'],
                                    [0.75, '#1196C6'],
                                    [1, '#D62F66']
                                ]
                            }
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        detail: {
                            offsetCenter: [0, 30],
                            color: '#fff'
                        }
                    },
                    {
                        startAngle: 200,
                        endAngle: -20,
                        type: 'gauge',
                        radius: '93%',

                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        axisLine: {
                            lineStyle: {
                                color: [
                                    [1, '#3E789F']
                                ],
                                width: 2
                            }
                        },
                        axisTick: {
                            show: false,
                            length: 16,
                            lineStyle: {
                                color: '#3E789F'
                            }
                        },
                        detail: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 20,
                            lineStyle: {
                                color: '#3E789F'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: '#fff',
                            fontSize: 16
                        }
                    }
                ]
            }

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function chartBar1(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var option = {
                color: cfg.color,
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 76,
                    right: 40
                },
                dataZoom: [{
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 25,
                        fillerColor: 'rgba(0, 57, 206, .2)',
                        borderColor: '#013CD9',
                        handleStyle: {
                            color: '#013CD9'
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 25,


                    }
                ],
                title: {
                    text: '得分',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 28,
                    top: 10
                },
                legend: {
                    data: cfg.legendData || '',
                    top: 0,
                    x: 'center',
                    left: 100,
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData ? cfg.legendData[index] : '',
                        type: cfg.type,
                        data: cfg.dataList[index],
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }

        function chartBar2(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var option = {
                color: cfg.color,
                grid: {
                    left: 80,
                    top: 50,
                    bottom: 266,
                    right: 40
                },

                title: {
                    text: '得分',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 28,
                    top: 10
                },
                legend: {
                    data: cfg.legendData || '',
                    top: 0,
                    x: 'center',
                    left: 100,
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },
                dataZoom: [{
                        show: true,
                        realtime: true,
                        bottom: 180,
                        start: 0,
                        end: 65,
                        fillerColor: 'rgba(0, 57, 206, .2)',
                        borderColor: '#013CD9',
                        handleStyle: {
                            color: '#013CD9'
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 65,


                    }
                ],
                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData ? cfg.legendData[index] : '',
                        type: cfg.type,
                        data: cfg.dataList[index],
                        barWidth: 28,
                        itemStyle: {
                            color: function (params) {
                                return cfg.color[params.dataIndex]
                            }
                        }
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        }

        function drawLiquidFill(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            //数值大小
            var max = 500; //满刻度大小
            var arr = cfg.value;
            var colorFill = '#00A77B';
            if (arr <= 0.3) {
                colorFill = '#a91411'
            } else if (arr > 0.3 && arr <= 0.6) {
                colorFill = '#fd5308'
            } else if (arr > 0.6 && arr <= 0.8) {
                colorFill = '#25d01c'
            } else if (arr > 0.8 && arr <= 1) {
                colorFill = '#009860'
            }
            var data = max * arr;
            var option = {
                title: [{
                        top: '30%',
                        left: 'center',
                        triggerEvent: true,
                        text: (arr * 10000 / 100).toFixed(0),
                        textStyle: {
                            color: '#fff',
                            fontStyle: 'normal',
                            fontWeight: 'normal',
                            fontSize: 38
                        }
                    },
                    {
                        bottom: '6%',
                        left: 'center',
                        text: cfg.title,
                        textStyle: {
                            color: '#fff',
                            fontSize: 22,
                            fontWeight: 'bold',
                        }
                    }
                ],
                series: [{
                        type: 'liquidFill',
                        itemStyle: {
                            normal: {
                                opacity: 0.4,
                                shadowBlur: 0,
                                color: "#3B7BF8",
                                shadowColor: '#3B7BF8'
                            }
                        },
                        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colorFill //颜色波浪
                            },
                            {
                                offset: 1,
                                color: colorFill //颜色波浪
                            }
                        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colorFill //颜色波浪
                            },
                            {
                                offset: 1,
                                color: colorFill //颜色波浪
                            }
                        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: "#4A87FF"
                            },
                            {
                                offset: 1,
                                color: '#00A77B'
                            }
                        ])],
                        name: arr[3],
                        data: [{
                            value: arr,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "#00A77B"
                                        },
                                        {
                                            offset: 1,
                                            color: '#00A77B'
                                        }
                                    ]),
                                    opacity: 1
                                }
                            }
                        }, {
                            value: arr,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: "#00A77B"
                                        },
                                        {
                                            offset: 1,
                                            color: '#00A77B'
                                        }
                                    ]),
                                    opacity: 1
                                }
                            }
                        }],
                        background: '#000',
                        center: ['50%', '40%'],
                        backgroundStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#3A63E8" //背景颜色
                                },
                                {
                                    offset: 1,
                                    color: '#3213AB'
                                }
                            ]),
                        },
                        label: {
                            normal: {
                                formatter: '',
                                textStyle: {
                                    fontSize: 12
                                }
                            }
                        },
                        outline: {
                            itemStyle: {
                                borderColor: '#3F1EB9',
                                borderWidth: 10
                            },
                            borderDistance: 0
                        }
                    },
                    {
                        "color": [new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: colorFill //进度条颜色开始
                            },
                            {
                                offset: 1,
                                color: colorFill //进度条颜色结束
                            }
                        ]), {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 69, 51, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(34, 255, 158, .8)' // 100% 处的颜色
                            }]
                        }, 'transparent'],
                        "type": "pie",
                        "center": ["50%", "40%"],
                        "radius": ["50%", "50.5%"],
                        "hoverAnimation": false,
                        "data": [{
                                "name": "",
                                "value": data,
                                "label": {
                                    "show": false,
                                    "position": "center",
                                    "color": "#fff",
                                    "fontSize": 38,
                                    "fontWeight": "bold",
                                    "formatter": function (o) {
                                        return data
                                    }
                                }
                            },
                            { //画中间的图标
                                "name": "",
                                "value": 0,
                                "label": {
                                    show: false,
                                    position: 'inside',
                                    backgroundColor: {
                                        image: ''
                                    },
                                    width: 15,
                                    height: 15,
                                    borderRadius: 7.5,
                                    padding: 6
                                }
                            }, { //画剩余的刻度圆环
                                "name": "",
                                "value": max - data,
                                "label": {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        ]
                    }
                ]
            }
            // 指定图表的配置项和数据
            myChart.setOption(option);
            myChart.on('click', function () {

                $('#myModal').modal()
                drawGauge()
            })



        }

        function showmap() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('map'));
            // 指定图表的配置项和数据


            /**
             此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

             默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
             当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

             http://echarts.baidu.com/option.html#series-map.geoIndex

             并且加了pin气泡图标以示数值大小
             */

            myChart.showLoading();
            $.getJSON('../src/js/zj.json', function (geoJson) {
                echarts.registerMap('zj', geoJson);
                myChart.hideLoading();
                var option = {
                    geo: {
                        show: true,
                        map: 'zj',

                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: false,
                        itemStyle: {
                            normal: {
                                areaColor: '#EE6363',
                                borderWidth: 5,
                                borderColor: '#00C0FF',
                                shadowColor: '#00C0FF', // 边框阴影颜色
                                shadowBlur: 50
                            }
                        }
                    },
                    legend: {

                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.name.concat('<br/>').concat('预报警数量:' + params
                                .data.value)

                        },
                        textStyle: {
                            fontSize: '100%'
                        }
                    },

                    visualMap: {
                        show: true,
                        min: 0,
                        right: 10,
                        text: ['高', '低'],
                        textStyle: {
                            color: '#fff'
                        },
                        calculable: true,
                        // max: 500,
                        inRange: {
                            color: ['#069869', '#FFEA00', '#FF5600', '#E02020']
                        },

                    },


                    series: [{
                            type: 'map',
                            map: 'zj',
                            aspectScale: 0.75, //长宽比
                            showLegendSymbol: false, // 存在legend时显示
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '100%'
                                    }
                                },
                            },
                            roam: false,
                            animation: false,
                            itemStyle: {
                                normal: {
                                    color: '#05C3F9',
                                    areaColor: '#031525',
                                    shadowBlur: 2,
                                    borderColor: '#00C0FF',
                                    shadowColor: '#05C3F9',

                                },
                                emphasis: {
                                    areaColor: '#2B91B7'
                                }
                            },
                            data: [{
                                name: '杭州市',
                                value: 1232

                            }, {
                                name: '湖州市',
                                value: 10

                            }]
                        }

                    ]
                };
                myChart.setOption(option);

            });

            // 使用刚指定的配置项和数据显示图表。


        }
    </script>

</body>

</html>